.home{
    background-color: #f9f9f9;
    padding-bottom: 50px;
    .nav{
        padding: 8px 10px 0;
        display: flex;
        /deep/.van-tab{
            width: 80px;
            height: 50px;
            margin-left: -20px;
        }
        /deep/.van-tabs__nav{
            background-color: transparent;
            height: 50px;
        }
        /deep/.van-tabs__line{
            background-color: #21d59a;
            bottom: 0.56rem;
        }
        /deep/.van-tab--active{
           font-size: 16px;
        }

    }
     
    .search{
        /deep/.van-search{
            background-color: transparent;
        }
        /deep/.van-search__content{
            background-color: white;
            border-radius: 20px;
        }
    }
    .recommended{
        padding: 0 10px;
        .userInfo-box{           
            width: 100%;
            /deep/.van-swipe{
                height: 130px;
                padding-bottom: 38px;
                img{
                    width: 75%;
                    background-size: cover;
                    // margin-right: 5px;
                    border-radius: 10px;
                }
                .name{
                    padding: 10px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 130px;
                }
                .badge{
                    font-size: 12px;
                    position: absolute;
                    left: 0;
                    top: 102px;
                    padding: 2px;
                    background-color: #b28e91;
                    border-radius: 10px;
                    color: white;
                    font-size: 12px;
                }             
            }
            /deep/.van-swipe__indicators{
                display: none;
            }
            .my-swipe .van-swipe-item {
                color: #fff;
                height: 100px;
                font-size: 20px;
                line-height: 150px;
                text-align: center;  
            }
        }
    }
    .song-list{
        .clearfix{
            h3{
                float: left;
            }
            .more{
                float: right;
                line-height: 50px;
                color: #7c7c66;
            }
            &::after{
                content: '';
                clear: both;
                display: block;
            }
        }
        .list{
            /deep/.van-swipe__indicators{
                display: none;
            }
           .music-box{
               display: flex;
               flex-wrap: wrap;
               justify-content: space-between;
               padding-bottom: 20px;
               .music-item{
                   width: 31.3%;
                   height: 100px;
                   border-radius: 10px;
                   position: relative;
                   &:nth-child(n+4){
                    margin-top: 50px;
                   }
                   img{
                    border-radius: 10px;
                    width: 100%;
                   }
                   .hot-box{
                       font-size: 12px;
                       color: white;
                       display: flex;
                       padding: 2px 4px;
                       background-color: #c7bea8;
                       border-radius: 10px;
                       position: absolute;
                       left: 0;
                       bottom: -18px;
                       vertical-align: middle;
                       .hot-icon{
                           width: 15px;
                           img{
                            width: 100%;
                        }
                       }
                      
                   }
               }
           }
        }
    }
    .music-hall{
        width: 100%;
        overflow: hidden;
        .swipe{
            width: 100%;
            /deep/.my-swipe .van-swipe-item {
                color: #fff;
                font-size: 20px;
                line-height: 150px;
                text-align: center;
                width: 360px;
                border-radius: 20px;
                overflow: hidden;
                height: 140px;
                img{
                    width: 100%;
                }
            } 
            /deep/.van-swipe{
                width: 95%;
                margin: 0 auto;
            }
        }
        .tabRouter{
            height: 60px;
            margin-top: 20px;
            /deep/.van-tabs__line{
                display: none;
            }
            /deep/.van-tabs__wrap{
                height: 68px;
            }
            /deep/.van-tab__text--ellipsis{
                overflow: inherit;
                font-size: 12px;
            }
            /deep/.van-tab:nth-child(3) .van-tab__text--ellipsis .van-icon::before{
                left: 12px;
            }
            /deep/.van-tabs__nav{
                background-color: transparent;
            }
            /deep/.van-icon{
                width: 0;
            }
            /deep/.van-icon::before{
                position: relative;
                top: -18px;
                font-size: 24px;
                color: #21d59a;
            }
        }
        .edit-select{
            width: 95%;
            margin: 0 auto;
            /deep/.van-swipe{
                height: 100px;
                padding-bottom: 38px;
                img{
                    width: 95%;
                    margin-right: 5px;
                    border-radius: 10px;
                }
                .name{
                    padding: 10px 0;
                }
                .badge{
                    position: absolute;
                    left: 0;
                    top: 88px;
                    padding: 5px;
                    background-color: #b28e91;
                    border-radius: 10px;
                    color: white;
                    font-size: 12px;
                }             
            }
            /deep/.van-swipe__indicators{
                display: none;
            }
            .my-swipe .van-swipe-item {
                color: #fff;
                height: 100px;
                font-size: 20px;
                line-height: 150px;
                text-align: center;  
            }
            
        }

        .tabs-box{
            width: 100%;
            padding: 8px 10px 0;
            font-size: 12px;
            .tabs-left{
                display: flex;
                /deep/.van-tab{
                    width: 80px;
                    height: 50px;
                    margin-left: -20px;
                }
                /deep/.van-tab__text--ellipsis{
                    font-size: 14px;
                }
                /deep/.van-tabs__nav{
                    background-color: transparent;
                    height: 50px;
                }
                /deep/.van-tabs__line{
                    background-color: #21d59a;
                    bottom: 28px;
                }
             
            }         
            .more{
                position: absolute;
                right: -4.73333rem;
                top: 0px;
                line-height: 50px;
                color: #7c7c66;
            }
            .tabs-bottom{
                width: 360px;
                margin: 10px 0 0;
                overflow: hidden;
                /deep/.van-swipe__indicators{
                    display: none;
                }
                .music-item-box{
                    display: flex;
                    margin-bottom: 10px;
                    font-size: 12px;
                    .item-img{
                        width: 58px;
                        border-radius: 10px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            font-size: 0;

                        }
                    }
                    .item-desc{
                        font-size: 12px;
                        margin-left: 15px;
                        .title{
                            margin-top: 10px;
                            font-weight: bold;
                        }
                        .desc{
                            margin-top: 5px;
                            color: #8e8e8e;
                        }
                    }
                }
            }
        }

        .leaderboard{
            width: 95%;
            margin: 0 10px 50px;
            padding-bottom: 58px;
            overflow: hidden;
            .clearfix::after{
                contain: '';
                clear: both;
                display: block;            
            }
            h3{
                float: left;
            }
            .more{
                float: right;
                line-height: 50px;
                color: #7c7c66;
            }
            /deep/.van-swipe__indicators{
                display: none;
            }
            /deep/.van-swipe{
                width: 100%;
            }
            /deep/.van-swipe-item{
                margin-right: 5px;
            }
            .hot-item{
                width: 100%;
                height: 100px;
                background-color: #bebebd;
                border-radius: 10px;
                display: flex;
                overflow: hidden;
                .hot-item-img{
                    width: 100px;
                    img{
                        border-radius: 10px;
                        width: 100%;
                        font-size: 0;
                    }
                }
                .hot-item-detail{
                    padding: 10px;
                    font-size: 14px;
                    font-weight: bold;
                    .hot-item-music{
                        font-weight: normal;
                        font-size: 12px;
                        margin-top: 5px;
                    }
                }
            }
          
        }
    }

   
}